<template>
    <div class="flex-container">
        <ul>
            <!-- 一饼 -->
            <li>
                <span></span>
            </li>
            <!-- 二饼 -->
            <li>
                <span></span>
                <span></span>
            </li>
            <!-- 三饼 -->
            <li>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <!-- 四饼 -->
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>

            <!-- 五饼 -->
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
        </ul>
    </div>
</template>
           
<script>
export default {};
</script>
<style scoped  lang='less'>
/* 
       伸缩盒子布局=====
       父元素：     display:flex;  开启伸缩盒子布局
                   flex-direction: column;   换轴
                   flex-wrap:wrap    换行

                横轴【左中右】：justify-content:flex-start |  flex-end | center | space-around | space-between
                侧轴【上中下】：align-items : flex-start |  flex-end | center 
       子元素：  align-self  : flex-start |  flex-end | center 
                flex:1



       
       

       
                  
                  
                  */
.flex-container {
  ul {
    list-style: none;

    li {
      float: left;
      margin: 10px;
      width: 90px;
      height: 90px;
      background-color: pink;
      border-radius: 5px;

      display: flex;

      &:nth-child(1) {
        justify-content: space-around;
        align-items: center;
      }

      &:nth-child(2) {
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
      }

      &:nth-child(3) {
        justify-content: space-around;
        align-items: center;
        span {
          margin: 5px;
          &:nth-child(1) {
            // align-self :flex-start

            align-self: flex-end;
          }

          &:nth-child(3) {
            // align-self :flex-end

            align-self: flex-start;
          }
        }
      }
      &:nth-child(4) {
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        span {
          margin: 10px;
        }
      }

      &:nth-child(5) {
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        span {
          margin: 5px;
          &:nth-child(3){
              margin:0px  35px;
          }
        }
      }

      span {
        width: 20px;
        height: 20px;
        display: block;
        border-radius: 50%;
        background-color: red;
      }
    }
  }
}
</style>